<script setup lang="ts">
import type { PopoverInstance } from 'element-plus'
import { Icon } from '@iconify/vue'
import { useDark, useFullscreen, useToggle } from '@vueuse/core'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi } from '@/apis/common/loginApi'
import { useLoginStore } from '../stores/loginStore'
import BaseBreadcrumb from './components/BaseBreadcrumb.vue'
import HeaderNotice from './components/HeaderNotice.vue'

const isDark = useDark()
const toggleDark = useToggle(isDark)
const loginState = useLoginStore()

const router = useRouter()
const popover = ref<PopoverInstance>()

async function doLogout() {
  popover.value?.hide()
  await loginApi.logout()
  await loginState.logout()
  router.push('/login')
}

function jump(path: string) {
  popover.value?.hide()
  router.push(path)
}

const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
</script>

<template>
  <div class="base-header flex flex-row flex-justify-between border-b border-b-primary border-b-solid">
    <div class="flex flex-row gap-2 flex-justify-left flex-items-center pl-2">
      <BaseBreadcrumb />
    </div>
    <div class="flex flex-row flex-justify-right flex-items-center">
      <Icon
        :icon="isDark ? 'tdesign:sunny' : 'tdesign:moon-filled'"
        class="header-icon"
        @click="toggleDark()"
      />
      <!-- <IconButton icon="i-tdesign-translate" /> -->
      <Icon
        :icon="isFullscreen ? 'tdesign:fullscreen-exit-1' : 'tdesign:fullscreen-1'"
        class="header-icon"
        @click="toggleFullscreen"
      />
      <HeaderNotice />
      <el-popover ref="popover" placement="bottom" :popper-style="{ padding: 0 }">
        <template #reference>
          <div class="flex flex-row cursor-pointer items-center pl-2 pr-4">
            <el-avatar :size="30" :src="loginState.user.avatarUrl" class="mr-2" />
            <div class="text-sm">
              {{ loginState.user.nickname }}
            </div>
          </div>
        </template>
        <div class="flex flex-col">
          <div class="item" @click="jump('/home/userInfo')">
            <Icon icon="tdesign:user" />
            <div>
              个人中心
            </div>
          </div>
          <div class="item" @click="jump('/home/userPwdModify')">
            <Icon icon="tdesign:lock-on" />
            <div>
              修改密码
            </div>
          </div>
          <div class="item">
            <Icon icon="tdesign:setting-1" />
            <div>
              系统设置
            </div>
          </div>
          <div class="item" @click="doLogout">
            <Icon icon="tdesign:logout" />
            <div>
              退出登录
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<style scoped>
.header-icon {
  --at-apply: h-4 w-4 p-2 rounded-full cursor-pointer hover-bg-active;
}

.item {
  --at-apply: text-sm flex flex-row items-center justify-center cursor-pointer py-3 gap-3 hover-bg-active;
}
</style>
